{% extends 'base.html' %}
{% load humanize %}
{% block page-content %}
{% include 'nav_cat_bar.html' %}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Web SSH</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">未启用 1</a>
                            </li>
                            <li><a href="#">未启用 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                    <div id="main" align="center">
                    <form id="form" name="form" class="pure-form pure-form-stacked">
                    <fieldset>
                    <div class="pure-item">
                        <label for="host">Host</label>
                        <input id="host" value="123.59.138.112" name="host" type="text" placeholder="Host">
                    </div>
                    <div class="pure-item">
                        <label for="port">Port</label>
                        <input id="port" value="22022" name="port" type="text" placeholder="Port">
                    </div>
                    <div class="pure-item">
                        <label for="username">Username</label>
                        <input id="username" value="leoiceo" name="username" type="text" placeholder="Username">
                    </div>
                    <div class="pure-item">
                        <label for="password">Password</label>
                        <input id="password" value="redhat" name="password" type="password" placeholder="Password">
                    </div>
                        <label for="remember" class="pure-checkbox">
                        <input id="remember" type="checkbox"> Remember me
                        </label>
                        <button type="button" class="pure-button pure-button-primary" onclick="connect()">Connect</button>
                    </fieldset>
    </form>
    </div>
                    <div id="term" align="center"></div>
                </div>
            </div>
        </div>
    </div>
</div>


    <style>
        .aside{text-align:center; background: #1f8dd6; height: 100px; color: #fff; vertical-align: middle;line-height:100px;font-size: 30px}
        #main{margin-top: 20px;}
        .pure-item{ margin: 0 auto 10px; width: 265px; position: relative;}
        .pure-item:after{ content: ""; display: table; clear: both;}
        .pure-item label{ float: left; line-height: 34px;}
        .pure-item input{ float: right;}
        .terminal {
            border: #000 solid 5px;
            font-family: "Monaco", "DejaVu Sans Mono", "Liberation Mono", monospace;
            font-size: 11px;
            color: #f0f0f0;
            background: #000;
            width: 600px;
            box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
        }
    </style>

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link href="/static/css/tooltip.css" rel="stylesheet"/>
<script type="text/javascript" src="/static/ws.js"></script>
<script type="text/javascript" src="/static/term.js"></script>
<script type="text/javascript" src="/static/formvalid.js"></script>

<script type="text/javascript">
var client = new WSSHClient();

    function openTerminal(options) {
        var client = new WSSHClient();
        var term = new Terminal({cols:80, rows:24, screenKeys:true});
        term.on('data',function(data){
            client.sendClientData(data);
        });
        term.open();
        $('.terminal').detach().appendTo('#term');
        term.write('Connecting...');
        client.connect({
            onError: function(error) {
                term.write('Error: ' + error + '\r\n');
                console.debug('error happened');
            },
            onConnect: function() {
                client.sendInitData(options);
                client.sendClientData('\r');
                console.debug('connection established');
            },
            onClose: function() {
                term.write("\rconnection closed")
                console.debug('connection reset by peer');
            },
            onData: function(data) {
                term.write(data);
                console.debug('get data:'+data);
            }
        })
    }

    function store(options){
        window.localStorage.host=options.host
        window.localStorage.port=options.port
        window.localStorage.username=options.username
        window.localStorage.password=options.password
    }

    function connect(){
        var remember=$("#remember").is(":checked")
        var options={
            host:$("#host").val(),
            port:$("#port").val(),
            username:$("#username").val(),
            password:$("#password").val()
        }
        if (remember){
            store(options)
        }
        openTerminal(options)
    }

    $(function(){
        $("#form").valid([
            { name:"host",type:"ip"},
            { name:"port",type:"port"},
            { name:"username",type:"username"},
            { name:"password",type:"password"},
        ]);
    })
</script>


{% endblock %}
